@import '../style/var.scss';

.em-cell {
    background-color: $color-white;
    box-sizing: border-box;
    color: inherit;
    min-height: 48px;
    overflow: hidden;
    display: block;
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid $gray-light;

    &-mask {
        &:after {
            background-color: #000;
            content: " ";
            opacity: 0;
            position: absolute 0;
        }

        &:active:after {
            opacity: .1;
        }
    }

    &-wrapper {
        background: {
            image: linear-gradient(0deg, $color-grey, $color-grey 50%, transparent 50%);
            size: 100% 1px;
            repeat: no-repeat;
            position: bottom;
        }

        display: flex;
        align-items: center;
        box-sizing: 16px;
        line-height: 1;
        min-height: inherit;
        overflow: hidden;
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    &-value {
        color: $cell-value-color;
        display: flex;
        align-items: center;
    }

    &-title {
        flex: 1;
    }

    &-text {
        vertical-align: middle;
    }

    &-label {
        color: #888;
        display: block;
        font-size: 12px;
        margin-top: 6px;
    }

    .is-link {
        margin-right: 24px;
    }

    &-right {
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        transform: translate3d(100%, 0, 0)
    }



}